<script>
export default {
  name: "animationPage",
  data(){
    return {
      flag: true,
      show: true,
      isshow: true,
      list: [1,2,3,4]
    }
  },
  methods: {
    changeBox() {
      this.flag = !this.flag
    },
    add() {
      this.list.push(5)
    },
    beforeEnter(el) { // 动画进入之前的回调
      el.style.transform = 'translateX(500px)';
    },
    enter(el, done) { // 动画进入完成时候的回调
      el.offsetWidth;
      el.style.transform = 'translateX(0px)';
      done();
    },
    afterEnter() { // 动画进入完成之后的回调
      this.isshow = !this.isshow;
    }
  }
}
</script>

<template>
  <div>
        <button @click="changeBox">改变盒子</button>
    <button @click="flag = !flag">改变盒子</button>
    <!-- 动画-->
    <transition>
      <div class="box" v-if="flag"></div>
    </transition>
    <transition name="myBox">
      <!--      <div class="box" v-if="flag"></div>-->
    </transition>
    <button @click="add">add</button>
    <transition-group tag="div">
      <div v-for="(item,index) in list" :key="index">
        {{item}}
      </div>
    </transition-group>

    <!--    第三方库-->
    <button @click="show = !show">
      Toggle render
    </button>
    <!--        @4:animate__    -->
    <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__rotateOutUpLeft"
        leave-active-class="animate__animated animate__zoomOutUp"
    >
      <p v-if="show">hello</p>
    </transition>

    <!-- 函数-->
    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

</template>

<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
}

.v-enter {
  transform: translateX(500px) scale(0.1);
}

.v-enter-to {
  transform: translateX(0px) scale(2);
}

.v-enter-active {
  transition: all 2s;
}

.v-leave {
  transform: translateX(0px) rotate(0);
}

.v-leave-to {
  transform: translateX(500px) rotate(360deg);
}

.v-leave-active {
  transition: all 3s;
}

.myBox-leave {
  transform: translateX(0px) rotate(0) scale(0.1);
}

.myBox-leave-to {
  transform: translateX(500px) rotate(360deg) scale(2);
}

.myBox-leave-active {
  transition: all 3s;
}
</style>